<template>
	<div v-if='controls'>
		<Checkbox label='全选' v-model:value='checkAll' :isNumber='false'/>
		<Checkbox label='展开' v-model:value='expand' :isNumber='false' />
		<Checkbox label='父子联动' v-model:value='checkStrictly' :isNumber='false'  />
	</div>
	<div :style="{maxHeight:height}" :class="{'oys scrollbar': height, 'jzer-line-tree': !block}">
		<Tree
			v-model:checkedKeys 	= 'checkedKeys'
			:checkable 				= 'multiple'
			:treeData 				= 'ajax?.data ?? []'
			:replaceFields 			= '{ key:idStr, title:nameStr }'
			:expandedKeys 			= 'expandedKeys'
			:disabled 				= 'disabled'
			@expand 	 			= 'onExpand'
			@check 					= 'onCheck'
			@select 				= 'onSelect'
			:checkStrictly 			= '!checkStrictly'
			:defaultExpandAll 		= 'expand'
			:blockNode 				= 'false'
		/>
	</div>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Tree } from 'ant-design-vue'
	/* --------------------------- 递归权组件 --------------------------- */
	const Input = $.lazy(()=>import('@antd/form/input.vue'))
	const Checkbox = $.lazy(()=>import('@antd/form/checkbox.vue'))
	/* --------------------------- Page --------------------------- */
	export default{
		components:{ Input, Checkbox, Tree },
		props:{
			p			: { type:String },
			value 		: { type:Array, default:[] },
			data		: { type:Array, default: [] },
			api 		: String,
			param 		: Object,
			idStr 		: { type: String, default: 'id' },
			nameStr 	: { type: String, default: 'label' },
			multiple	: { type:Boolean, default:true },
			controls 	: { type:[ Boolean,Number ], default:true },
			height 		: String,
			cache 		: [ Boolean,Number ],
			expand 		: { type:Boolean, default: false },
			disabled 	: Boolean,
			block 		: { type:[ Boolean,Number ], default: true },
		},
		emits:{
			select: null,
			change: null,
			blur: null,
			'update:value': null
		},
		setup(props, ctx){
			const { api, value, data, cache, name, idStr, nameStr, controls, block } = props
			
			const ajax = ref({ data })
			
			const checkedKeys = ref(value)
			const expandedKeys  = ref(value)
			const checkAll = ref(false)
			const expand = ref(props.expand)
			const checkStrictly = ref(true)
			
			if(!expand.value){
				setTimeout(()=>expandedKeys.value = [...value])
			}
			
			// 找到所有数据组件 [{ key:, title: },...]
			const dataList = [ ]
			const expendKeysAll = [ ]
			const generateList = data => {
				for (let i = 0; i < data.length; i++) {
					const node = data[i];
					dataList.push({ [idStr]:node[idStr], [nameStr]: node[nameStr] });
					expendKeysAll.push(node[idStr]) // 默认展开所有
					if (node.children) {
						generateList(node.children);
					}
				}
				return expendKeysAll
			}
			
			const getBlockData = data => {
				const deep = data => {
					data.forEach(v=>{
						if( $fn.hasArray(v.children) ){
							deep(v.children)
						}else{
							v.class = 'last'
						}
					})
					return data
				}
				return deep( data )
			}
			
			$fn.ajax({ ajax, ctx,  ...props }).then(data=>{
				if( controls ){
					generateList(data)
					if(expand.value){ expandedKeys.value = expendKeysAll }
				}else{
					if(expand.value){
						expandedKeys.value = generateList(data)
					}
				}
				if( !block ){
					ajax.value.data = getBlockData( data )
				}
			})
			
			if(controls){
				watch(expand, value=>expandedKeys.value = value ? expendKeysAll : [])
				watch(checkAll, value=>{
					if(value){
						checkedKeys.value = expendKeysAll
						ctx.emit('update:value', expendKeysAll)
					}else{
						checkedKeys.value = []
						ctx.emit('update:value', [])
					}
				})
			}
			
			watch(()=>props.value, value => checkedKeys.value = value)
			
			return {
				ajax,
				checkedKeys,
				expandedKeys,
				checkAll,
				expand,
				checkStrictly,
				onCheck: (value, { node }) => {
					value = checkStrictly.value ? value : value.checked
					ctx.emit('update:value', value)
					ctx.emit('change', value)
				},
				onExpand: (keys, { node }) => {
					expandedKeys.value = keys
				},
				onSelect: (keys, { node }) => {
					const { eventKey, expanded } = node
					const k = expandedKeys.value
					
					if(expanded){
						const index = k.findIndex(v => v === eventKey )
						k.splice(index,1)
						expandedKeys.value = k
					}else{
						expandedKeys.value = [ ...k, eventKey ]
					}
				}
			}
		}
	}
</script>
<style>
	.jzer-line-tree .ant-tree-child-tree{overflow:hidden;}
	.jzer-line-tree .last{float:left;padding-top:5px!important; margin: 0!important;}
</style>